<template>
	<view>
		<view class="page">
		<view class="top" :style="`padding-top:`+$store.state.StatusBar.statusBar + `px`">
			<view class="top-icon"   @click="back">
				<image class="img"
					src=""
					mode="aspectFill"></image>
			</view>
			<view class="top-title" >{{title}}</view>
		</view>
		<view class="body" :style="`margin-top:`+$store.state.StatusBar.statusBar + `px`">
		<!-- 		<view class="user">
					<view class="avatar">
						<image class="img" mode="aspectFill" :src="info.user.pic"></image>
					</view>
					<text>您尚未开通vip</text>
				</view> -->
				<view class="title" style="text-align: left; font-size:36rpx; font-weight: 600; color:#333;">成为小世界会员</view>
				<view class="list">
					<swiper class="swiper" @change="changeItme" circular  >
						<swiper-item  v-for="(item,index) in info.list">
							<view   class="item" :class="selectItem.id == item.id ? 'on item'+index : 'item'+index" >
								<view style="position: absolute; left:10rpx; top:10rpx; font-size: 26rpx;">{{item.num}}个月</view>
								<view style="position: absolute; left:10rpx; top:80rpx; font-size: 36rpx; color: red;">￥{{item.priceDay}}/天</view>
								<view style="position: absolute; left:10rpx; bottom:10rpx; font-size: 20rpx;">￥{{item.price}}</view>
								<view style="position: absolute; right:0rpx; bottom:0rpx; color:#fff; font-size: 20rpx; background-color: red; padding: 5rpx 10rpx; border-radius: 20rpx;">{{item.strKey}}</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
				<view class="title" style="text-align: left; font-size:36rpx; font-weight: 600; color:#333;">会员特权</view>
				<view class="icon-list">
					<view class="icon-item">
						<image class="img" mode="aspectFill" src="./img/vip_icon1.png"></image>
						<text>免费畅聊</text>
					</view>
					<view class="icon-item">
						<image class="img" mode="aspectFill" src="./img/vip_icon2.png"></image>
						<text>会员专属色</text>
					</view>
					<view class="icon-item">
						<image class="img" mode="aspectFill" src="./img/vip_icon3.png"></image>
						<text>查看谁看过我</text>
					</view>
					<view class="icon-item">
						<image class="img" mode="aspectFill" src="./img/vip_icon4.png"></image>
						<text>会员专属标识</text>
					</view>
					<view class="icon-item">
						<image class="img" mode="aspectFill" src="./img/vip_icon5.png"></image>
						<text>会员专属气泡</text>
					</view>
					<view class="icon-item">
						<image class="img" mode="aspectFill" src="./img/vip_icon6.png"></image>
						<text>专属VIP客服</text>
					</view>
				</view>
				<view  class="button" @click="open">
				<span v-if="selectItem.id != 0">￥{{selectItem.price}}</span>
				立即开通</view>
				<uni-popup ref="popup" type="center">
					<m-pay :money="selectItem.price" :projectId="selectItem.id" :type="2"></m-pay>
				</uni-popup>
			</view>
		</view>
	</view>
</template>

<script>
	import {to} from '@/utils/index.js';
	import Mpay from '@/components/m-pay/m-pay.vue';
	export default {
		components: {
			Mpay
		},
		data() {
			return {
				title: '会员中心',
				info: {
					user:{pic:''},
					list:[]
				},
				selectItem: {
					id: 0
				}
			}
		},
		onLoad(option) {
			
		},
		onShow(option){
			this.getInfo();
		},
		methods: {
			to,
			back(){
				to()
			},
			open(){
				if(this.selectItem.id <= 0){
					uni.showToast({
						title: "请选择开通时间",
						icon: "none"
					})
				}
				this.$refs.popup.open()
			},
			async getInfo(){
				let res = await this.$c.post("/app/vip/list")
				if(res.code != 0){
					uni.navigateTo({
					  url: '/im/login/login'
					});
				}
				for(let i in res.data.list){
					let item = res.data.list[i]
					if(this.selectItem.id == 0){
						this.selectItem = item
					}
				}
				console.log(this.info)
				this.info = res.data
			},
			changeItme(e)
			{
				// console.log(this.info.list[e.detail.current])
				
				this.selectItem = this.info.list[e.detail.current]
			},
			async submit(){
				let res = await this.$c.post("/app/exchange/exchange?id="+item.id)
				if(res.code != 0){
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
					return;
				}
				uni.showToast({
					title: "兑换成功",
					icon: "none"
				})
				setTimeout(()=>{
					this.getInfo()
				},1000)
			}
		}
	}
</script>

<style scoped lang="scss">
	.page {
		width: 100vw;
		padding:30rpx;
		height: 100vh;
		// background: linear-gradient(#e3ecfb, #fdedf0, #fff, #fff);
		transform: translateX(-30rpx);
	}
	.top {
		position: fixed;
		top: 0rpx;
		width: 100%;
		// background-color: #e3ecfb;
		z-index: 999;
		text-align: center;
		vertical-align: middle;
		padding:10rpx;
	}
	.top-icon {
		position: absolute;
		left: 30rpx;
		z-index: 99;
		width: 30rpx;
		height: 30rpx;
	}
	.top-title {
		line-height: 50rpx;
		display: block;
		height:50rpx;
		z-index: 99;
	}

	.body{
		padding-top:40rpx;
		.user{
			text-align: center; 
			.avatar{
				width:80rpx;
				height:80rpx;
				// position:absolute;
				// left:50%;
				margin-left:50%;
				transform: translateX(-50%);
				border-radius: 50%;
				overflow: hidden;
				margin-bottom: 20rpx;
				margin-top: 20rpx;
			}
			text{
				color: #00c8c8;
				font-size:24rpx;
			}
		}
		.title{
			color: #ffaa7f;
			text-align: center;
			margin:20rpx;
			margin-top:80rpx;
		}
		.button{
			background-color: #333;
			color:#fff;
			padding:10rpx 30rpx;
			height:80rpx;
			border-radius: 10rpx;
			font-size:34rpx;
			line-height: 80rpx;
			width:80%;
			margin: 0 auto;
			text-align: center;
			margin-top:50rpx;
		}
		.icon-list{
			margin-top:40rpx;
			margin-bottom:40rpx;
			height:400rpx;
			width:100%;
			.icon-item{
				width:calc(100%/3);
				margin-top:30rpx;
				margin-bottom:30rpx;
				float:left;
				text-align: center;
				image{
					width: 60rpx;
					height:60rpx;
				}
				text{
					display: block;
				}
			}
		}
		.list{
			margin-top:20rpx;
			height: 300rpx;
			width:100vw;
			// .on{
			// 	// background-color: #ffaa7f;
			// 	background: linear-gradient(to right,#34221a,  #363113, #322119);
			// 	color:#fff;
			// }
			.item{
				width:90%;
				margin-left:5%;
				display: block;
				height: 300rpx;
				text-align: center;
				border-radius: 20rpx;
				position:relative;
			}
		}
		.item0{
			background-image: url('./img/bg1.png');
			background-size: 100%;
		}
		.item1{
			background-image: url('./img/bg2.png');
			background-size: 100%;
		}
		.item2{
			background-image: url('./img/bg3.png');
			background-size: 100%;
		}
		.item3{
			background-image: url('./img/bg4.png');
			background-size: 100%;
		}
	}

</style>